<template>
    <ul class="chainInfoList" :class="{['sgchainBox'+styleType]:styleType}">
        <li v-if="showName">
            <span v-t="'collection.grid1'">holder</span>
            <em>{{info.ownerName || '--'}}</em>
        </li>
        <li>
            <span v-t="'collection.grid2'">Holding Time</span>
            <em>{{info.ownerSuccessTime || '--'}}</em>
        </li>
        <li>
            <span v-t="'collection.grid3'">Main Chain</span>
            <em>{{info.chainName || '--'}}</em>
        </li>
        <li>
            <span>ID</span>
            <em>{{info.tokenId || '--'}}</em>
        </li>
        <li v-if="info.contractAddress">
            <span v-t="'collection.grid4'">Contract Address</span>
            <em class="emcolor">{{info.contractAddress}}</em>
        </li>
         <li>
            <span v-t="'collection.grid5'">Token Standard</span>
            <em>{{info.tokenStandard || '--'}}</em>
        </li>
         <li  v-if="info.nftRoyalty">
            <span v-t="'collection.grid6'">nftRoyalty</span>
            <em class="emcolor">{{info.nftRoyalty || '--'}}</em>
        </li>
        
    </ul>
</template>

<script>
import { reactive,toRefs,getCurrentInstance,computed} from 'vue'
import {useRoute,useRouter} from 'vue-router'
import { useStore } from 'vuex'
import { useI18n } from 'vue-i18n'

export default {
    components:{
       
    },
    props:{
        styleType:Number,
        info:Object,
        showName:{
            type:Boolean,
           default(){
               return true
           }  
        }
    },
    setup(props,context){
        const router = useRouter()
        const route = useRoute()
        const store = useStore()
        const {proxy} = getCurrentInstance()
        const {t} = useI18n()

        const state = reactive({
            contractAddress:''
        })
        state.contractAddress = computed(()=>{
            const str = props.info.contractAddress
            if(str){
                const srt1 = str.substr(0,8)
                const srt2 = str.substr(str.length-8,8)
                return srt1+'......'+srt2
            }else{
                return ''
            }
        })

        return{
            ...toRefs(state)
        }
    }
}
</script>

<style lang="scss" scoped>
    .chainInfoList{
        //padding: 90px 20px 20px 20px;
        margin: 0;
        list-style: none;
        padding-top:20px ;
        font-family: Poppins-Medium, Poppins;
        font-weight: 500;
        &.sgchainBox2{
            padding-top:0 ;
            li{
                height: 50px;
                padding:0;
                margin: 0;
                font-weight: normal;
                font-size: 24px;
                background: none;
                span{
                    color: #7AA8DD;
                }
                em{
                    color: #ffffff;
                        width: 60%;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                }
            }
        }
        li{
            display: flex;
            height: 70px;
            align-items: center;
            // background: rgba(103,248,255,0.2);
            font-size: 24px;
            font-family: Poppins-Medium, Poppins;
            font-weight: 600;
            color: #FFFFFF;
            &+li{
                margin: 20px 0 0 0;
            }
            img{
                width: 30px;
            }
            span{
                color: #82FEF4;
                // flex: 1;
                width:300px;
            }
            em{
                font-style: normal;
                color: #ffffff;
            }.emcolor{
                color: #82FEF4 !important;
            }
        }
    }
</style>